import "./App.css"
import { Router, Route, Switch, Redirect } from "react-router-dom"
import AuthRoute from "./components/AuthRoute"
import { lazy, Suspense } from "react"
// import Login from "@/pages/Login"
// import Layout from "@/pages/Layout"
import history from "@/utils/history"

const Login = lazy(() => import("@/pages/Login"))
const Layout = lazy(() => import("@/pages/Layout"))

function App() {
  return (
    <Router history={history}>
      {/* fallback -> 当页面还没加载时 显示在页面上的内容 */}
      <Suspense fallback={<div className="loading">loading...</div>}>
        <div className="app">
          <Switch>
            <Route path="/login" component={Login}></Route>
            <AuthRoute path="/home" component={Layout}></AuthRoute>
            <Redirect path="/" to="/home"></Redirect>
          </Switch>
        </div>
      </Suspense>
    </Router>
  )
}

export default App
